<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SomeTools-抽奖</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="LuckyDrawstyle.css">
    <link rel="stylesheet" href="jquery-3.4.1.js">
    <link rel='icon' href='../image/ICO.ico' type='image/x-ico' />
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">

</head>

<body>
    <button id="soundContorl" onclick="soundContorl()" class="btn btn-light">
        <i class="fa fa-volume-up fa-lg"></i>
    </button>
    <audio id="startMusic">
        <source src="./抽奖背景音乐.mp3" loop="loop" type="audio/mpeg">
    </audio>
    <p id="num">0</p><br>
    <div id="inputs">
        <div class="form-inline">
            <input id="maxNum" size="10" type="text" class="form-control" placeholder="最大号数">&nbsp;
            <input id="minNum" size="10" type="text" class="form-control" placeholder="最小号数">&nbsp;&nbsp;
            <button type="button" class="btn btn-light" onclick="start()">开始</button>&nbsp;
            <button type="button" class="btn btn-light" onclick="stop()">停止</button>&nbsp;
        </div>
    </div>
</body>
<script>
    let is = false;
    let startMusic = document.getElementById('startMusic');
    let play = true; //是否播放
    let starti = false;

    function start() {
        is = false;
        let maxNum = $("#maxNum").val();
        let minNum = $("#minNum").val();
        starti = true;
        if (play) {
            startMusic.play();
        }
        for (let i = minNum; i <= maxNum; i++) {
            setInterval(() => {
                if (is) {
                    return;
                }
                $("#num").html(i);
            }, 1);

        }
    }

    function stop() {
        starti = false;
        startMusic.pause();
        is = true;
    }

    function soundContorl() {
        if (play) {
            $("#soundContorl").html('<i class="fa fa-volume-off fa-lg"></i>');
            play = false;
            if (starti) {
                startMusic.pause();
            }
        } else {
            $("#soundContorl").html('<i class="fa fa-volume-up fa-lg"></i>');
            play = true;
            if (starti) {
                startMusic.play();
            }

        }
    }
</script>

</html>